<template>
  <CommonCard title="今日订单" :value="numberFormat(useReport.reportInfo.orderToday)">
    <template #default>

      <div ref="lineRef" style="width:100%;height:100%;">

      </div>
    </template>

    <template #footer>
      <span>昨日订单量</span>
      <span class="emphasis"> ${{ moneyFormat(useReport.reportInfo.orderLastDay) }}</span>
    </template>


  </CommonCard>
</template>

<script lang="ts" >
export default {
  name: 'TodayOrders'



}
</script>
<script lang="ts" setup>
import { ref, onMounted ,watch} from 'vue';
import CommonCard from './commonCard.vue';
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts';
import { useReportDataStore } from "@/stores/reportData"
import useFormat from "@/hooks/useFrmat"
const { numberFormat, moneyFormat } = useFormat()
const useReport = useReportDataStore()

const lineRef = ref();
let chart: EChartsType;
// 准备参数及相关的数据
const getOption = () => {
  return {
    xAxis: {
      boundaryGap: false, // 两侧不留白
      data: useReport.reportInfo.orderTrendAxis // x轴数据列表
    },
    yAxis: {
      show: false // 不显示Y轴及标线
    },
    series: {
      name: '实时订单数',
      type: 'line',
      // 列表数据
      // data: orderTrend.value,
      data: useReport.reportInfo.orderTrend,
      // 线条光滑
      smooth: true,
      // 折线点的样式 不要显示折线点
      itemStyle: {
        opacity: 0
      },
      // 区域的样式
      areaStyle: {
        color: 'purple'
      },
      // 折线(曲线)是否显示
      lineStyle: {
        opacity: 0
      }
    },
    // 位置的设置 坐标
    grid: {
      left: 0,
      right: 0,
      bottom: 0,
      top: 0
    },
    // 提示框组件。
    tooltip: {
      // 坐标轴触发
      trigger: 'axis',
      // 是否将 tooltip 框限制在图表的区域内
      confine: true
    }
  };
};
onMounted(() => {
  chart = echarts.init(lineRef.value);
 
})
watch(() => {
return   useReport.reportInfo.orderLastDay
} ,() => {
  chart.setOption(getOption())
})
</script>

<style lang="scss" scoped>

</style>